<template>
	<view class="page">
		<u-sticky bgColor="#fff">
			<u-tabs :list="list" lineWidth="50" :scrollable="false" activeStyle="color:#3c9cff" :current="current"
				@change="change"></u-tabs>
		</u-sticky>
		<view class="content" v-if="current == 0">
			<view class="item">
				<view class="top">
					<u--image :showLoading="true" src="/static/home/swiper1.png" radius="10rpx" width="260rpx"
						height="160rpx" @click="click"></u--image>
					<view class="right">
						<view class="">
							<u--text text="绿色乘用车升级套件" bold size=16></u--text>
						</view>
						<view class="middle">
							<u--text text="免费升级、十万公里质保" size=14></u--text>
							<u--text text="共2套" align="right" size=14></u--text>
						</view>
						<view class="bottom">
							<text></text>
							<u--text text="支付金额：" color="#767676" size=12></u--text>
							<u--text text="8888" size=20 lineHeight="1em"></u--text>
						</view>
					</view>
				</view>
				<view class="bottom">
					<u--text text="已完成" color="#0256FF"></u--text>
					<view class="right">
						<u-button text="查看订单" plain size="normal" shape="circle" @click="checkOrder"></u-button>
					</view>
				</view>
			</view>

			<view class="item">
				<view class="top">
					<u--image :showLoading="true" src="/static/home/swiper1.png" radius="10rpx" width="260rpx"
						height="160rpx" @click="click"></u--image>
					<view class="right">
						<view class="">
							<u--text text="绿色乘用车升级套件" bold size=16></u--text>
						</view>
						<view class="middle">
							<u--text text="免费升级、十万公里质保" size=14></u--text>
							<u--text text="共2套" align="right" size=14></u--text>
						</view>
						<view class="bottom">
							<text></text>
							<u--text text="支付金额：" color="#767676" size=12></u--text>
							<u--text text="8888" size=20 lineHeight="1em"></u--text>
						</view>
					</view>
				</view>
				<view class="bottom">
					<u--text text="待支付" color="#0256FF"></u--text>
					<view class="right">
						<u-button text="取消订单" plain size="normal" shape="circle"></u-button>
						<u-button text="继续支付" plain size="normal" shape="circle" color="#0256FF"
							customStyle="marginLeft:10px;"></u-button>
					</view>
				</view>
			</view>

			<view class="item">
				<view class="top">
					<u--image :showLoading="true" src="/static/home/swiper1.png" radius="10rpx" width="260rpx"
						height="160rpx" @click="click"></u--image>
					<view class="right">
						<view class="">
							<u--text text="绿色乘用车升级套件" bold size=16></u--text>
						</view>
						<view class="middle">
							<u--text text="免费升级、十万公里质保" size=14></u--text>
							<u--text text="共2套" align="right" size=14></u--text>
						</view>
						<view class="bottom">
							<text></text>
							<u--text text="支付金额：" color="#767676" size=12></u--text>
							<u--text text="8888" size=20 lineHeight="1em"></u--text>
						</view>
					</view>
				</view>
				<view class="bottom">
					<u--text text="已取消" color="#0256FF"></u--text>
					<view class="right">
						<u-button text="删除订单" plain size="normal" shape="circle"></u-button>
					</view>
				</view>
			</view>

		</view>
		<view class="content" v-if="current == 1">
			1
		</view>
		<view class="content" v-if="current == 2">
			2
		</view>
		<view class="content" v-if="current == 3">
			3
		</view>

	</view>
</template>
<script>
export default {
	data() {
		return {
			list: [{
				name: '全部',
			}, {
				name: '待付款',
			}, {
				name: '待收货',
			}, {
				name: '待安装',
			},
			],
			current: 0,
		}
	},
	methods: {
		change(index) {
			console.log(index)
			this.current = index.index
		},
		checkOrder() {
			uni.navigateTo({
				url: '/pages/orders/orderDetail'
			})
		}
	}
}



</script>
<style lang="scss" scoped>
.page {
	height: 100%;
	background-color: #F4F5F7;
}

.content {
	padding: 30rpx 24rpx;
}

.item {
	background-color: white;
	border-radius: 10px;
	padding: 14px 20rpx 10rpx 20rpx;
	margin-bottom: 30rpx;

	.top {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px #D8D8D8 solid;
		padding-bottom: 20rpx;

		.right {
			display: flex;
			flex-direction: column;
			width: 390rpx;

			.middle {
				display: flex;
				justify-content: space-between;
				margin-top: 10rpx;
			}

			.bottom {
				::v-deep view {
					width: max-content;
					flex-direction: column;
					justify-content: flex-end !important;
				}

				::v-deep text {
					white-space: nowrap;
				}

				display: flex;
				justify-content: flex-start;
				align-self: end;
				margin-top: auto;
			}
		}
	}

	.bottom {
		display: flex;
		justify-content: space-between;
		padding-top: 10rpx;

		.right {
			display: flex;
			justify-content: flex-end;
		}
	}
}
</style>
